import React from 'react'
import './My.css'
import { BellOutline ,EditSOutline ,BankcardOutline, UserOutline, SetOutline, FaceRecognitionOutline,UserSetOutline,UserCircleOutline} from 'antd-mobile-icons'
import {QRCodeSVG} from 'qrcode.react';
import { List, Button } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
export default function My() {
    const navigate = useNavigate();
    const list ={id:1,name:'小神医',zhiwei:'主任医师',danwei:'深圳市罗湖区妇幼保健医院',jineng:'儿科',isRenzheng:false,img:'2.png'}
  return (
    <div>
        <div className='My-nav'>
            <BellOutline style={{position:'fixed',top:'42px',right:'25px',}} fontSize={22} color='#fff'/>
        </div>
        <div className='My-info'>
            <div className='My-info-flex'>
                <div style={{marginRight:'10px',position:'relative'}}>
                    <img src={list.img} />
                    <div className={list.isRenzheng?'renzheng':'weirenzheng'}>{list.isRenzheng?'已认证':'去认证'}</div>
                </div>
                <div style={{marginRight:'10px'}}>
                    <p>
                        <span style={{fontWeight:'bold',marginRight:'10px'}}>{list.name}</span>
                        <span style={{fontSize:'12px',color:'gray',marginRight:'10px'}}>{list.zhiwei}</span>
                        <EditSOutline />
                    </p>
                    <p>
                        <span style={{fontSize:'12px',color:'gray',marginRight:'10px'}}>{list.danwei}</span>
                        <span style={{fontSize:'12px',color:'gray'}}>{list.jineng}</span>
                    </p>
                </div>
                <div>
                    <QRCodeSVG value="https://reactjs.org/" size={50} fgColor='rgb(0, 136, 220)'/>
                </div>
            </div>
        </div>
        <div className='My-feature'>
        <List>
            <List.Item prefix={<BankcardOutline fontSize={25} color='var(--adm-color-primary)' />} onClick={() => { }}>
            <span style={{fontWeight:'bold'}}>我的钱包</span>
            </List.Item>
            <List.Item prefix={<FaceRecognitionOutline fontSize={25} color='var(--adm-color-primary)' />} onClick={() => { }}>
            <span style={{fontWeight:'bold'}}>我的认证</span>
            </List.Item>
            <List.Item prefix={<UserSetOutline fontSize={25} color='var(--adm-color-primary)' />} onClick={() => { }}>
            <span style={{fontWeight:'bold'}}>问诊及提问设置</span>
            </List.Item>
            <List.Item prefix={<UserCircleOutline fontSize={25} color='var(--adm-color-primary)' />} onClick={() => { }}>
            <span style={{fontWeight:'bold'}}>我的专属客服</span>
            </List.Item>
            <List.Item prefix={<UserOutline fontSize={25} color='var(--adm-color-primary)' />} onClick={() => { }}>
            <span style={{fontWeight:'bold'}}>我的医生经纪人</span>
            </List.Item>
            <List.Item prefix={<SetOutline fontSize={25} color='var(--adm-color-primary)' />} onClick={() => {navigate('/myplg') }}>
            <span style={{fontWeight:'bold'}}>医疗AI助手</span>
            </List.Item>
        </List>
        </div>
    </div>
  )
}
